<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.projectName" placeholder="项目名称" clearable />
        </el-form-item>
        <el-form-item label="发货时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item label="甲方联系人">
          <el-input v-model="listQuery.clientContact" placeholder="甲方联系人" clearable />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="listQuery.leaderName" placeholder="项目负责人" clearable />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="listQuery.orderStatus" placeholder="全部" clearable>
            <el-option label="待审核" :value="0" />
            <el-option label="已审核" :value="1" />
            <el-option label="已修改待审核" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否异常">
          <el-select v-model="listQuery.isAbnormalDelivery" placeholder="全部" clearable>
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在加载中..."
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          {{ (listQuery.pageNum - 1) * listQuery.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="projectName" min-width="180" show-overflow-tooltip />
      <el-table-column label="发货时间" prop="deliveryDate" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.deliveryDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="甲方联系人" prop="clientContact" width="120" align="center" />
      <el-table-column label="甲方电话" prop="clientPhone" width="140" align="center" />
      <el-table-column label="负责人" prop="leaderName" width="100" align="center" />
      <el-table-column label="异常发货" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isAbnormalDelivery ? 'danger' : 'success'">
            {{ scope.row.isAbnormalDelivery ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="getOrderStatusType(scope.row.orderStatus)">
            {{ getOrderStatusText(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleView(scope.row)">查看</el-button>
          <el-button 
            size="mini" 
            type="success" 
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button 
            v-if="scope.row.orderStatus !== 1"
            size="mini" 
            type="info" 
            @click="handleAudit(scope.row, 1)"
          >审核通过</el-button>
          <el-button 
            v-if="scope.row.orderStatus === 1"
            size="mini" 
            type="warning" 
            @click="handleAudit(scope.row, 0)"
          >撤销审核</el-button>
          <el-button 
            size="mini" 
            type="danger" 
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { adminPageDeliveryOrders, adminDeleteDeliveryOrder, auditOrderStatus } from '@/api/delivery';
import { parseTime } from '@/utils';

export default {
  name: 'AdminDeliveryOrderList',
  filters: {
    formatDate(time) {
      return parseTime(time, '{y}-{m}-{d}');
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      dateRange: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        deliveryStartDate: undefined,
        deliveryEndDate: undefined,
        clientContact: undefined,
        leaderName: undefined,
        orderStatus: undefined,
        isAbnormalDelivery: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      adminPageDeliveryOrders(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },
    handleSearch() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.dateRange = [];
      this.listQuery = {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        deliveryStartDate: undefined,
        deliveryEndDate: undefined,
        clientContact: undefined,
        leaderName: undefined,
        orderStatus: undefined,
        isAbnormalDelivery: undefined
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleDateChange(date) {
      if (date) {
        this.listQuery.deliveryStartDate = date[0];
        this.listQuery.deliveryEndDate = date[1];
      } else {
        this.listQuery.deliveryStartDate = undefined;
        this.listQuery.deliveryEndDate = undefined;
      }
    },
    getOrderStatusType(status) {
      switch (status) {
        case 0:
          return 'warning';
        case 1:
          return 'success';
        case 2:
          return 'info';
        default:
          return 'info';
      }
    },
    getOrderStatusText(status) {
      switch (status) {
        case 0:
          return '待审核';
        case 1:
          return '已审核';
        case 2:
          return '已修改待审核';
        default:
          return '未知状态';
      }
    },
    handleView(row) {
      this.$router.push({ path: `/delivery/admin/detail/${row.id}` });
    },
    handleEdit(row) {
      this.$router.push({ path: `/delivery/admin/edit/${row.id}` });
    },
    handleAudit(row, status) {
      const statusText = status === 1 ? '审核通过' : '撤销审核';
      this.$confirm(`确认将订单"${row.projectName}"${statusText}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditOrderStatus(row.id, status).then(response => {
          this.$message.success(response.msg || `${statusText}成功`);
          this.getList();
        });
      }).catch(() => {
        this.$message.info(`已取消${statusText}`);
      });
    },
    handleDelete(row) {
      this.$confirm(`确认删除订单"${row.projectName}"吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adminDeleteDeliveryOrder(row.id).then(response => {
          this.$message.success(response.msg || '删除成功');
          this.getList();
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-container {
  padding-bottom: 10px;
}
.pagination-container {
  margin-top: 30px;
}
</style> 